Google Charts API তে সরাসরি চার্ট এক্সপোর্ট করার জন্য কোনো বিল্ট-ইন ফিচার নেই, তবে আমরা JavaScript এবং HTML5 এর কিছু ফিচার ব্যবহার করে চার্টকে PDF বা PNG ফরম্যাটে এক্সপোর্ট করতে পারি। এর জন্য Chart-to-image এবং html2pdf.js লাইব্রেরি ব্যবহার করা হয়।

এখানে আমরা দেখাবো কিভাবে একটি Google Chart কে PNG এবং PDF ফরম্যাটে এক্সপোর্ট করা যায়।

Step 1: Angular প্রজেক্ট তৈরি করা

প্রথমে একটি নতুন Angular প্রজেক্ট তৈরি করুন (যদি আপনার আগে থেকেই কোনো প্রজেক্ট থাকে, তবে সেটি ব্যবহার করতে পারেন):

ng new export-chart-app
cd export-chart-app

Step 2: angular-google-charts এবং html2pdf.js ইন্সটল করা

angular-google-charts লাইব্রেরি ইতোমধ্যেই ইন্সটল করা রয়েছে, তবে html2pdf.js লাইব্রেরি ইন্সটল করতে হবে যা PDF এক্সপোর্ট করার জন্য ব্যবহৃত হবে। এছাড়া Chart.js এর মাধ্যমে চার্ট রেন্ডারিং হবে, যেহেতু Google Charts API সরাসরি চার্ট ইমেজ এক্সপোর্ট করতে সাপোর্ট করে না।

npm install html2pdf.js --save
npm install angular-google-charts --save

Step 3: GoogleChartsModule এবং html2pdf.js ইমপোর্ট করা

এখন, আমাদের app.module.ts ফাইলে GoogleChartsModule এবং html2pdf.js ইমপোর্ট করতে হবে।

app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { GoogleChartsModule } from 'angular-google-charts';
import * as html2pdf from 'html2pdf.js'; // html2pdf.js লাইব্রেরি ইমপোর্ট

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    GoogleChartsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 4: Chart তৈরি এবং Export ফাংশন তৈরি করা

এখন, আমরা একটি Google Chart তৈরি করব এবং সেই চার্টকে PNG অথবা PDF ফরম্যাটে এক্সপোর্ট করার জন্য দুটি ফাংশন তৈরি করব।

app.component.ts:

import { Component, OnInit } from '@angular/core';
import * as html2pdf from 'html2pdf.js'; // html2pdf.js লাইব্রেরি ইমপোর্ট

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'Export Google Chart Example';
  chartType = 'PieChart'; // Chart Type
  chartData = [
    ['Category', 'Amount'],
    ['Food', 300],
    ['Clothing', 500],
    ['Transportation', 700]
  ]; // Chart Data
  chartOptions = {
    title: 'Expenses Breakdown',
    width: 600,
    height: 400
  };

  constructor() { }

  ngOnInit(): void {}

  // PDF Export Function
  exportPDF() {
    const element = document.getElementById('chart_div'); // Chart container element
    const opt = {
      margin:       1,
      filename:     'chart-export.pdf',
      image:        { type: 'jpeg', quality: 0.98 },
      html2canvas:  { dpi: 192, letterRendering: true },
      jsPDF:        { unit: 'in', format: 'letter', orientation: 'portrait' }
    };
    html2pdf().from(element).set(opt).save(); // Export to PDF
  }

  // PNG Export Function
  exportPNG() {
    const chart = document.getElementById('chart_div') as HTMLCanvasElement; // Chart container element
    const chartImage = chart.toDataURL('image/png'); // Convert chart to PNG
    const link = document.createElement('a');
    link.href = chartImage;
    link.download = 'chart-export.png'; // File name for download
    link.click(); // Trigger download
  }
}

এখানে, দুটি ফাংশন তৈরি করা হয়েছে:

1. exportPDF(): এই ফাংশনটি html2pdf.js ব্যবহার করে chart-এর PDF এক্সপোর্ট করবে।
2. exportPNG(): এই ফাংশনটি HTML Canvas এর মাধ্যমে chart কে PNG ফরম্যাটে রূপান্তর করে এবং ডাউনলোড করতে সহায়তা করবে।

Step 5: Chart এবং Export Button তৈরি করা

এখন, app.component.html ফাইলে Google Chart এবং Export to PDF/PNG বাটন তৈরি করা হবে।

app.component.html:

<h1>{{ title }}</h1>

<!-- Google Chart -->
<google-chart 
  [type]="chartType" 
  [data]="chartData" 
  [options]="chartOptions" 
  id="chart_div">
</google-chart>

<!-- Export Buttons -->
<button (click)="exportPDF()">Export to PDF</button>
<button (click)="exportPNG()">Export to PNG</button>

এখানে, আমরা দুটি বাটন তৈরি করেছি, একটি PDF এক্সপোর্ট এবং অন্যটি PNG এক্সপোর্ট করার জন্য।

Step 6: অ্যাপ্লিকেশন চালানো

এখন, অ্যাপ্লিকেশনটি চালাতে নিচের কমান্ডটি ব্যবহার করুন:

ng serve

এটি ডিফল্টভাবে অ্যাপ্লিকেশনটি http://localhost:4200 এ রান করবে। ব্রাউজারে গিয়ে আপনি আপনার Google Chart দেখতে পারবেন এবং দুইটি Export বাটন ক্লিক করে চার্ট PDF এবং PNG ফরম্যাটে এক্সপোর্ট করতে পারবেন।

সারাংশ

এভাবে, আমরা Google Chart তৈরি করে সেটিকে PDF এবং PNG ফরম্যাটে এক্সপোর্ট করার প্রক্রিয়া দেখলাম। html2pdf.js লাইব্রেরি ব্যবহার করে আমরা চার্টকে PDF এ রূপান্তর করেছি এবং Canvas ব্যবহার করে PNG ফরম্যাটে এক্সপোর্ট করেছি। এই প্রক্রিয়া চার্ট ডেটা শেয়ার বা প্রিন্ট করার জন্য খুবই উপকারী হতে পারে।